<!-- 辣妈 -->
<template>
	<view class="app">
		<header>
			<view class="mail" @click="moveMessage">
				<image src="../../static/img/icons8-爱情信.gif" alt="" />
				<u-badge :isDot="true" type="error"></u-badge>
			</view>
			<view class="m" @click="moveSearch">
			</view>
			<u--input placeholder="肠胀气几个月会消失" prefixIcon="search"
				prefixIconStyle="font-size: 22px;color: #909399"></u--input>
		</header>
		<view class="readbox">
			<view class="page-wrap">
				<scroll-list ref="list" @load="load" @refresh="refresh" :option="option">
					<view class="tab">
						<u-scroll-list>
							<view class="scroll-list">
								<view class="scroll-list__line" v-for="(item, index) in menuArr" :key="index">
									<view class="scroll-list__line__item" v-for="(item1, index1) in item" :key="index1"
										:class="[(index1 === item.length - 1) && 'scroll-list__line__item--no-margin-right']"
										@click="move(item1.id)">
										<image :src="item1.icon" mode="" style="width: 90rpx;height: 90rpx"></image>
										<view class="">
											<text class="scroll-list__line__item__text">{{ item1.name }}</text>
										</view>
									</view>
								</view>
							</view>
						</u-scroll-list>
					</view>
					<text class="tipsRead">推荐阅读</text>
					<view class="list-item" v-for="(item, index) in read" :key="index">
						<view class="user">
							<image :src="item.publisher.avatar"
								style="width: 36px;height: 36px;border-radius: 50%;margin-right: 10px;"></image>
							<text>{{item.publisher.screen_name}}</text>
						</view>
						<view class="message">
							<u-read-more :toggle='true' showHeight='77' closeText='展开'>
								<rich-text :nodes="item.title"></rich-text>
							</u-read-more>
							<view class="image">
								<u-image v-for="(img,index) in item.images" :src="img" :lazy-load="true" width='100'
									height='100' @click="showImage(item.images,index)"></u-image>
							</view>
							<view class="controls">
								<view>
									<image :src="item.circle_icon" alt="" style="width: 16px;height: 16px;" />
									<text> {{item.circle_name}}</text>
								</view>
								<view><span>
										<image src="../../static/img/评论.png" mode=""></image> {{item.attitude_count}}
									</span><span>
										<image src="../../static/img/赞小.png" mode=""></image> {{item.praise_num}}
									</span></view>
							</view>
						</view>
					</view>
				</scroll-list>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuArr: [
					[{
							name: '婚后生活圈',
							icon: 'http://img.seeyouyima.com/icon/5282e10e180a8.png',
							id: 13
						},
						{
							name: '0-6月宝宝',
							icon: 'http://img.seeyouyima.com/icon/52e0bae0c2f42.png',
							id: 47
						}, {
							name: '产后调理区',
							icon: 'http://img.seeyouyima.com/icon/5282e122deb0b.png',
							id: 49
						}, {
							name: '萌宝大秀场',
							icon: 'http://img.seeyouyima.com/icon/5282e0d46af92.png',
							id: 25
						}, {
							name: '母婴用品汇',
							icon: 'http://sc.seeyouyima.com/forum/data/59707ec83ab50_200_200.png',
							id: 52
						}, {
							name: '同龄圈',
							icon: 'http://sc.seeyouyima.com/shop/data/56371d2c747fe_120_120.png',
							id: 5878
						}
					],
					[{
							name: '宝宝常见病',
							icon: 'http://sc.seeyouyima.com/forum/data/59715136e455f_200_200.png',
							id: 5714
						},
						{
							name: '婆媳麻辣烫',
							icon: 'http://sc.seeyouyima.com/forum/data/59707ea62ef5c_200_200.png',
							id: 85
						}, {
							name: '居家生活馆',
							icon: 'http://img.seeyouyima.com/icon/53aa9ad06f6f1.png'
						}, {
							name: '健康养生馆',
							icon: 'http://img.seeyouyima.com/icon/5282e02180272.png',
							id: 22
						}, {
							name: '妇科讨论区',
							icon: 'http://sc.seeyouyima.com/forum/data/5971a4bd984e6_200_200.png',
							id: 75
						}, {
							name: '营养辅食圈',
							icon: 'http://img.seeyouyima.com/icon/530f041f4bf3d.png',
							id: 5664
						}
					]
				],
				read: [],
				option: {
					size: 5,
					auto: true
				},
			}
		},
		onLoad() {},
		onReady() {},
		methods: {
			load(paging) {
				setTimeout(() => {
					uni.request({
						url: "/v2/feeds_recommend?time=0&mode=3&date=2023-10-12&person_recommend=1&first_request=0&plan_type=5&direction=prev",
						header: {
							"statinfo": "eyJvc2RldmljZSI6Ing4Nl82NCIsIm9ubHlrZXkiOiI4NjYwODQwNDY2NDExMzciLCJvc21vZGVsIjoiTXVNdSIsInVtZW5nbWFjIjoiMDg6MDA6Mjc6MWM6ZjM6NmQiLCJvc2JyYW5kIjoiQW5kcm9pZCIsInN3aWR0aCI6NzIwLCJ1YSI6Ik11TXUiLCJvcGVudWRpZCI6IjM5YTQ5ZDViLWMxZTAtNGM5YS04ZjM3LTM3NjA2MmFkM2ViOSIsIm1hYyI6Ijg2NjA4NDA0NjY0MTEzNyIsIm1hbnVmYWN0dXJlciI6Ik5ldGVhc2UiLCJjcHVhYmkiOiJhcm02NC12OGEiLCJzZGt2ZXJzaW9uIjoyMywiYnVpbGR2IjoiNi4wLjUiLCJ1bWVuZ2lkIjoiMzViNzkyZmMyMmM3MDM3OSIsIm9zbmFtZSI6ImNhbmNyb194ODZfNjQiLCJoYXJtb255b3MiOjAsIm9zIjoyLCJkZW5zaXR5IjoxLjUsIm90IjoiIiwibWFjX3JlYWwiOiIiLCJjcHVhYmkyIjoiYXJtZWFiaSIsInNlcmlhbCI6IlpYMUc0MkNQSkQiLCJvc3ZlcnNpb24iOiI2LjAuMSIsInJvbXZlcnNpb24iOiIiLCJhbmRyb2lkaWQiOiIzNWI3OTJmYzIyYzcwMzc5Iiwic2hlaWdodCI6MTI4MCwiaW1laSI6Ijg2NjA4NDA0NjY0MTEzNyIsImRldmljZV9pZCI6Ijg2NjA4NDA0NjY0MTEzNyIsIndlYnVhIjoiTW96aWxsYVwvNS4wIChMaW51eDsgQW5kcm9pZCA2LjAuMTsgTXVNdSBCdWlsZFwvVjQxN0lSOyB3dikgQXBwbGVXZWJLaXRcLzUzNy4zNiAoS0hUTUwsIGxpa2UgR2Vja28pIFZlcnNpb25cLzQuMCBDaHJvbWVcLzkxLjAuNDQ3Mi4xMTQgTW9iaWxlIFNhZmFyaVwvNTM3LjM2IiwiYXBuIjoiNCIsInVpZCI6NTM2OTQxMDQxLCJhcGtiaXRzIjoiMzI2NCIsImRuYSI6ImRkNGE2NzhjN2Q1YmM4M2EzNGFkNDFkYTk2YjkyYjI5MTI2ODM1N2Y1NDFlNjhiZmJlZTE1ZTc2NzE1YzAxMjEiLCJzb3VyY2UiOiItPkNvbW11bml0eVByZWduYW5jeUZyYWdtZW50Ok1haW5BY3Rpdml0eSIsImNoYW5uZWxpZCI6IjkiLCJ2IjoiNi4wLjUiLCJjb3VudHJ5IjoiQ04iLCJsYW5ndWFnZSI6InpoIiwiYm9vdF9tYXJrIjoiZmJjZTIwYTMtMzBlNi00MTdmLTgyMjAtMmQ1NWE2ZDJlZWYwIiwidXBkYXRlX21hcmsiOiIxNjk2ODI5NTg1LjI1MTMyMjAwMCJ9",
							"source": "->CommunityPregnancyFragment:MainActivity",
							"bundleid": 9
						},
						success: res => {
							this.read = [...this.read, ...res.data.data.docs]
							this.$refs.list.loadSuccess({
								list: this.read,
								total: 50
							});
						}
					})
				})
			},
			showImage(imgs, index) {
				uni.previewImage({
					urls: imgs,
					current: imgs[index]
				})
			},
			refresh(paging) {
				setTimeout(() => {
					uni.request({
						url: "/v2/feeds_recommend?time=0&mode=3&person_recommend=1&first_request=0&plan_type=5&direction=prev",
						header: {
							"statinfo": "eyJvc2RldmljZSI6Ing4Nl82NCIsIm9ubHlrZXkiOiI4NjYwODQwNDY2NDExMzciLCJvc21vZGVsIjoiTXVNdSIsInVtZW5nbWFjIjoiMDg6MDA6Mjc6MWM6ZjM6NmQiLCJvc2JyYW5kIjoiQW5kcm9pZCIsInN3aWR0aCI6NzIwLCJ1YSI6Ik11TXUiLCJvcGVudWRpZCI6IjM5YTQ5ZDViLWMxZTAtNGM5YS04ZjM3LTM3NjA2MmFkM2ViOSIsIm1hYyI6Ijg2NjA4NDA0NjY0MTEzNyIsIm1hbnVmYWN0dXJlciI6Ik5ldGVhc2UiLCJjcHVhYmkiOiJhcm02NC12OGEiLCJzZGt2ZXJzaW9uIjoyMywiYnVpbGR2IjoiNi4wLjUiLCJ1bWVuZ2lkIjoiMzViNzkyZmMyMmM3MDM3OSIsIm9zbmFtZSI6ImNhbmNyb194ODZfNjQiLCJoYXJtb255b3MiOjAsIm9zIjoyLCJkZW5zaXR5IjoxLjUsIm90IjoiIiwibWFjX3JlYWwiOiIiLCJjcHVhYmkyIjoiYXJtZWFiaSIsInNlcmlhbCI6IlpYMUc0MkNQSkQiLCJvc3ZlcnNpb24iOiI2LjAuMSIsInJvbXZlcnNpb24iOiIiLCJhbmRyb2lkaWQiOiIzNWI3OTJmYzIyYzcwMzc5Iiwic2hlaWdodCI6MTI4MCwiaW1laSI6Ijg2NjA4NDA0NjY0MTEzNyIsImRldmljZV9pZCI6Ijg2NjA4NDA0NjY0MTEzNyIsIndlYnVhIjoiTW96aWxsYVwvNS4wIChMaW51eDsgQW5kcm9pZCA2LjAuMTsgTXVNdSBCdWlsZFwvVjQxN0lSOyB3dikgQXBwbGVXZWJLaXRcLzUzNy4zNiAoS0hUTUwsIGxpa2UgR2Vja28pIFZlcnNpb25cLzQuMCBDaHJvbWVcLzkxLjAuNDQ3Mi4xMTQgTW9iaWxlIFNhZmFyaVwvNTM3LjM2IiwiYXBuIjoiNCIsInVpZCI6NTM2OTQxMDQxLCJhcGtiaXRzIjoiMzI2NCIsImRuYSI6ImRkNGE2NzhjN2Q1YmM4M2EzNGFkNDFkYTk2YjkyYjI5MTI2ODM1N2Y1NDFlNjhiZmJlZTE1ZTc2NzE1YzAxMjEiLCJzb3VyY2UiOiItPkNvbW11bml0eVByZWduYW5jeUZyYWdtZW50Ok1haW5BY3Rpdml0eSIsImNoYW5uZWxpZCI6IjkiLCJ2IjoiNi4wLjUiLCJjb3VudHJ5IjoiQ04iLCJsYW5ndWFnZSI6InpoIiwiYm9vdF9tYXJrIjoiZmJjZTIwYTMtMzBlNi00MTdmLTgyMjAtMmQ1NWE2ZDJlZWYwIiwidXBkYXRlX21hcmsiOiIxNjk2ODI5NTg1LjI1MTMyMjAwMCJ9",
							"source": "->CommunityPregnancyFragment:MainActivity",
							"bundleid": 9
						},
						success: res => {
							this.read = res.data.data.docs
							// 刷新成功
							this.$refs.list.refreshSuccess({
								list: this.read,
								total: 50
							});
						},
					})
				})
			},
			move(id) {
				console.log(id);
				uni.navigateTo({
					url: "/pages/street/shopInfo/forum?id=" + id
				})
			},
			moveMessage() {
				uni.navigateTo({
					url: "/pages/street/message"
				})
			},
			moveSearch() {
				uni.navigateTo({
					url: "/pages/street/hotSearch"
				})
			}
		}
	}
</script>

<style lang="scss">
	* {
		box-sizing: border-box;
	}

	.app {
		background-color: var(--bgcolor);
		padding-top: 60px;

		header {
			display: flex;
			align-items: center;
			background-color: white;
			padding: 10px;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 99;

			.mail {
				position: relative;
				width: 30px;
				height: 30px;

				image {
					width: 100%;
					height: 100%;
				}

				.u-badge--dot {
					position: absolute;
					top: 0;
					right: 0;
				}
			}

			.u-input {
				margin-left: 10px;
				background-color: whitesmoke;
			}
		}

		.tab {
			.scroll-list__line__item {
				min-width: 77px;
				text-align: center
			}
		}
	}

	.tipsRead {
		font-size: .9rem;
		color: #888;
	}

	.readbox {
		padding: 10px;

		.list-item {
			margin: 10px 0;
			background-color: white;
			padding: 10px;
			border-radius: 8px;

			&:active {
				background-color: whitesmoke;
			}

			.user {
				display: flex;
				align-items: center;
			}
		}

		.message {
			margin-top: 10px;

			.image {
				display: flex;
				margin-top: 10px;

				.u-fade-enter-active {
					margin-right: 4px;
				}
			}
		}

		.controls {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 16px;

			view:nth-child(1) {
				background-color: var(--bgcolor);
				padding: 4px 8px;
				border-radius: 12px;
				display: flex;
				align-items: center;

				text {
					margin-left: 6px;
					font-size: .85rem;
				}
			}

			>view:nth-child(2) {
				font-size: .85rem;
				display: flex;

				span {
					margin: 0 4px;
					display: flex;
					align-items: center;
				}

				image {
					width: 14px;
					height: 14px;
					margin-right: 4px
				}
			}
		}
	}

	.m {
		width: 100%;
		position: absolute;
		height: 100%;
		left: 100rpx;
		z-index: 999;
	}

	.scroll-list {
		@include flex(column);

		&__goods-item {
			&__image {
				width: 60px;
				height: 60px;
				border-radius: 4px;
			}

			&__text {
				color: #f56c6c;
				text-align: center;
				font-size: 12px;
				margin-top: 5px;
			}
		}

		&__show-more {
			background-color: #fff0f0;
			border-radius: 3px;
			padding: 3px 6px;
			@include flex(column);
			align-items: center;

			&__text {
				font-size: 12px;
				width: 12px;
				color: #f56c6c;
				line-height: 16px;
			}
		}

		&__line {
			@include flex;
			margin-top: 10px;

			&__item {
				&__image {
					width: 61px;
					height: 48px;
				}

				&__text {
					margin-top: 5px;
					color: $u-content-color;
					font-size: 12px;
					text-align: center;
				}

				&--no-margin-right {
					margin-right: 0;
				}
			}
		}
	}
</style>